import React, { Component } from 'react';
import './index.css'

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            num:0,
            num1:9,
            name:"凯宝"
        };
    }
    render() {
        const {num,num1,name}=this.state;
        return(
        <>
            <h1 className="red">{num}好好学习react</h1>
            <h4>{num1}精通react</h4>

            <div className="blue">{name}乖摸摸头!</div>
            <br/>
            {/*第一种写法*/}
            {/* <button onClick={(ev)=>this.click(ev)}>{num}</button> */}

            {/* 第二种常用 */}
        {/* <button onClick={this.click}>{num}</button> */}
        </>
        
        )
    };
    //第一种用法
    // click(){
    //     let {num}=this.state;
    //     num++;
    //     this.setState({num})
    // }

    // 第二种方法
    // click=()=>{
    //     let {num}=this.state;
    //     num++;
    //     this.setState({num})
    // }

};





export default App;
